<template>
    <wd-tabs v-model="tab">
        <wd-tab title="已使用" :key="0">
            <view class="content">
                <view class="card-list">
                    <view v-for="card in shoppingCardList" :key="card._id" class="card-item">
                        <view class="card-content" :style="{
                                backgroundImage: card.backgroundImage ? `url(${card.backgroundImage})` : 'none',
                                backgroundColor: !card.backgroundImage ? '#f5f5f5' : 'transparent',
                            }">
                            <view class="card-info">
                                <view class="card-title">{{ card.title }}</view>
                                <view class="card-amount">¥{{ card.amount }}</view>
                                <view class="card-details">
                                    <view class="card-no">卡号：{{ card.cardNo }}</view>
                                    <view class="card-expire">有效期至：{{ new Date(card.expiredAt).toLocaleDateString() }}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </wd-tab>
        <wd-tab title="已过期" :key="1">
            <view class="content">
                <view class="card-list">
                    <view v-for="card in shoppingCardList" :key="card._id" class="card-item expired">
                        <view
                            class="card-content"
                            :style="{
                                backgroundImage: card.backgroundImage ? `url(${card.backgroundImage})` : 'none',
                                backgroundColor: !card.backgroundImage ? '#f5f5f5' : 'transparent',
                            }" >
                            <view class="card-info">
                                <view class="card-title">{{ card.title }}</view>
                                <view class="card-amount">¥{{ card.amount }}</view>
                                <view class="card-details">
                                    <view class="card-no">卡号：{{ card.cardNo }}</view>
                                    <view class="card-expire">过期时间：{{ new Date(card.expiredAt).toLocaleDateString() }}</view>
                                </view>
                            </view>
                            <view class="expired-tag">已过期</view>
                        </view>
                    </view>
                </view>
            </view>
        </wd-tab>
    </wd-tabs>
    <wd-fab @click="toWithdraw" :expandable="false" />
    <wd-message-box selector="withdrawMessage">
        <wd-form :model="formData" ref="formRef">
            <wd-input :rules="rules.cardNo" v-model="formData.cardNo" label="卡号" placeholder="请输入卡号" prop="cardNo" />
            <wd-input :rules="rules.secretKey" v-model="formData.secretKey" label="卡密" placeholder="请输入卡密" prop="secretKey" />
        </wd-form>
    </wd-message-box>
    <wd-toast />
</template>

<script setup>
import {  ref, watch } from "vue";
import { getShoppingCardList, withdrawCard } from "../../api/shoppingCard";
import { ShoppingCardStatus } from "../../constants/shoppingCard";
import { useMessage, useToast } from "wot-design-uni";

const tab = ref(0);

const shoppingCardList = ref([]);
const fetchList = async () => {
    let statusParams = ShoppingCardStatus.USED;
    if (tab.value === 1) statusParams = ShoppingCardStatus.EXPIRED;
	console.log(statusParams);
    const {
        data: { list },
    } = await getShoppingCardList(statusParams);
    shoppingCardList.value = list;
};
fetchList();

watch(tab, fetchList);
const formData = ref({
    cardNo: "",
    secretKey: "",
});
const formRef = ref();
const rules = {
    cardNo: [
        {
            required: true,
            message: "请输入卡号",
        },
    ],
    secretKey: [
        {
            required: true,
            message: "请输入卡密 ",
        },
    ],
};
const message = useMessage("withdrawMessage");
const toast = useToast();
const toWithdraw = () => {
    formData.value = {};
    message.confirm({
        title: "兑换",
        beforeConfirm: obj => {
            formRef.value.validate().then(valid => {
                if (!valid) return;
                withdrawCard(formData.value).then(() => {
                    toast.success("兑换成功");
                    fetchList();
                    obj.resolve(true);
                });
            });
        },
    });
};

const withdraw = () => {};
</script>

<style>
	     .content {
    height: calc(100vh - var(--status-bar-height) - 42px);
    overflow-y: scroll;
    padding: 16px;
}

.card-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.card-item {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-content {
    height: 160px;
    background-size: cover;
    background-position: center;
    padding: 16px;
    position: relative;
}

.card-info {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.card-title {
    font-size: 18px;
    font-weight: bold;
}

.card-amount {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.card-details {
    font-size: 14px;
    opacity: 0.9;
}
.card-no,
.card-expire {
    margin-top: 4px;
    color: #ffef42;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.card-item.expired {
    position: relative;
    opacity: 0.8;
}

.expired-tag {
    position: absolute;
    top: 16px;
    right: 16px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 14px;
    backdrop-filter: blur(4px);
}

.card-item.expired .card-content {
    filter: grayscale(0.5);
}  
</style>
